<template>
    <div class="main">
        <div class="air-column">
            <h2>剩机人</h2>
            <el-form class="member-info">
                <div v-for="(item,index) in users" :key="index" class="member-info-item" >

                    <el-form-item label="乘机人类型">
                        <el-input v-model="item.username" placeholder="姓名" class="input-with-select">
                            <el-select 
                            slot="prepend" 
                            value="1" 
                            placeholder="请选择">
                                <el-option label="成人" value="1"></el-option>
                            </el-select>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="证件类型">
                        <el-input v-model="item.id"
                        placeholder="证件号码"  class="input-with-select">
                            <el-select 
                            slot="prepend" 
                            value="1"           
                            placeholder="请选择">
                                <el-option label="身份证" value="1" :checked="true"></el-option>
                            </el-select>
                        </el-input>
                    </el-form-item>

                    <span class="delete-user" @click="handleDeleteUser(index)">-</span>
                </div>
            </el-form>

            <el-button class="add-member" type='primary' @click="handleAddUsers">添加乘机人</el-button>
        </div>

        <div class="air-column">
            <h2>保险</h2>
            <div>
                <div v-for="(item,index) in data.insurances" :key="index" class="insurance-item">
                    <el-checkbox 
                    :label="`${item.type}：￥${item.price}/份×${users.length}  
                    最高赔付${item.compensation}`" 
                    border
                    @change="handlerInsurance(item.id)">
                    </el-checkbox> 
                </div>
            </div>
        </div>

        <div class="air-column">
            <h2>联系人</h2>
            <div class="contact">
                <el-form label-width="60px">
                    <el-form-item label="姓名">
                        <el-input v-model="contactName"></el-input>
                    </el-form-item>

                    <el-form-item label="手机">
                        <el-input v-model="contactPhone" placeholder="请输入内容">
                            <template slot="append">
                            <el-button @click="handleSendCaptcha">发送验证码</el-button>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="验证码">
                        <el-input v-model="captcha"></el-input>
                    </el-form-item>
                </el-form>   
                <el-button type="warning" class="submit" @click="handleSubmit">提交订单</el-button>
            </div>
        </div>
        <!-- <el-button @click="allPrice">点我计算总价格</el-button> -->
        <!-- 
            因为计算属性 必须使用了才会执行，因此我们必须药使用
            但是又因为总价格不需要渲染在这个地方，因此我们这里
            借助hidden属性把input隐藏掉
         -->
        <input type="text" hidden v-model="totalPrice">
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: ()=>({})
        }
    },
    data(){
        return {
            users: [ // 乘机人列表数据
                {
                    username: "", // 用户名
                    id: "" // 身份证号码
                }
            ],
            insurances: [] ,// 保险id
            contactName: '', // 联系人名字
            contactPhone: '', // 联系人电话
            invoice: false, // 发票
            captcha: '000000', // 验证码
        }
    },
    /**
     * 计算属性
     * 语法：在和data/methods等等同级的位置上添加
     * computed: {
     *   声明计算属性
     *   自定计算属性名(){
     *       计算的逻辑
     *       return 计算的结果
     *   }
     * }
     * 计算属性的使用：直接把声明的自定义计算属性名当成普通的变量名来使用即可
     * */ 
    computed: {
        // 当计算属性中的变量值发生变化的时候，会自动触发计算属性函数执行，计算出最新的结果
        totalPrice(){
            /**
             * 总价格 = (成人机票金额 + 机建燃油金额 + 保险金额)*人数
             * */ 
            // console.log(111,this.data);
            let price = 0
            // 成人机票+机建燃油金额
            price = this.data.airport_tax_audlet + this.data.seat_infos.org_settle_price
            // 计算保险金额
            this.insurances.forEach(id=>{
                // find 表示在数组中查找符合条件的元素，并返回该元素
                let obj = this.data.insurances.find(item=>{
                    return item.id === id
                })
                price += obj.price
            })
            // 计算出来的价格*人数 = 机票总价格
            price = price*this.users.length
            // 子传父  把计算出来的总价格传递给父组件
            this.$emit('priceEvent', price)
            // 计算属性一定要把计算结果返回
            return price
        }
    },
    methods: {
        // 机票总价格
        allPrice(){
            /**
             * 总价格 = (成人机票金额 + 机建燃油金额 + 保险金额)*人数
             * 
             * */ 
            // console.log(111,this.data);
            let price = 0
            // 成人机票+机建燃油金额
            price = this.data.airport_tax_audlet + this.data.seat_infos.org_settle_price
            
            // 计算保险金额
            // console.log("保险金额",this.insurances);
            this.insurances.forEach(id=>{
                // find 表示在数组中查找符合条件的元素，并返回该元素
                let obj = this.data.insurances.find(item=>{
                    return item.id === id
                })
                price += obj.price
            })
            // 计算出来的价格*人数 = 机票总价格
            price = price*this.users.length
            
            console.log("总价格：",price);

        },
        // 添加乘机人
        handleAddUsers(){
            console.log('点击了添加乘机人按钮');
            this.users.push({
                username: "", // 用户名
                id: "" // 身份证号码
            })
        },
        
        // 移除乘机人
        handleDeleteUser(index){
            // 根据下标值删除数组中的元素可以使用哪个方法？
            // 答：splice 语法：arr.splice(删除数据对应的下标值,删除的个数)
            this.users.splice(index, 1)
        },
        // 选择保险
        handlerInsurance(id){
            // console.log(id);
            // 保存保险id
            let index = this.insurances.indexOf(id)
            //判断数组中是否存在id，存在则返回下标值，否则返回-1
            if(index === -1){
                this.insurances.push(id)
            }else{
                this.insurances.splice(index,1)
            }
        },
        
        // 发送手机验证码
        handleSendCaptcha(){
            // 校验手机号码是否正确
            let reg = /^1[3-8]\d{9}$/
            if(!reg.test(this.contactPhone)){
                return this.$message.error('手机号码格式不正确！')
            }
            // 获取验证码
            this.$axios({
                url: '/captchas',
                method: 'post',
                data:{
                    tel: this.contactPhone
                }
            }).then(res=>{
                // console.log(145,res);
                this.$confirm(`模拟手机验证码：${ res.data.code }`, '提示',{
                    cancelButtonText: '取消',
                    confirmButtonText: '确定'
                })
            })
        },

        // 提交订单
        handleSubmit(){
            // 校验（保险不需要）
            if(!this.users[0].username){
                return this.$message.warning('请输入乘机人姓名')
            }
            if(!this.users[0].id){
                return this.$message.warning('请输入乘机人身份证号码')
            }
            if(!this.contactName){
                return this.$message.warning('请输入联系人姓名')
            }
            if(!this.contactPhone){
                return this.$message.warning('请输入联系人电话')
            }
            if(!this.captcha){
                return this.$message.warning('请输入验证码')
            }
            // 调用接口
            this.$axios({
                url: '/airorders',
                method:'post',
                data: {
                    users: this.users, // 乘机人列表
                    insurances: this.insurances ,// 保险id
                    contactName: this.contactName, // 联系人名字
                    contactPhone: this.contactPhone, // 联系人电话
                    invoice: false, // 发票
                    captcha: '000000', // 验证码
                    air: this.$route.query.id, // 航班id
                    seat_xid: this.$route.query.seat_xid
                },
                headers: {
                    // 注意：Bearer字母后面必须要有空格
                    Authorization: "Bearer " + this.$store.state.user.userInfo.token
                }
            }).then(res=>{
                // 跳转到付款页面
                this.$router.push({
                    path: '/air/pay',
                    query: {
                        id: res.data.data.id
                    }
                })
            })
        }
    }
}
</script>

<style scoped lang="less">
    .air-column{
        border-bottom:1px #ddd dashed;
        padding-bottom: 20px;   
        margin-bottom: 20px;
    }

    .air-column h2{
        margin-bottom: 20px;
        font-size: 22px;
        font-weight: normal;
    }

    /deep/ .el-select .el-input {
        width: 130px;
    }

    .input-with-select{
        width:590px;
    }

    .input-with-select /deep/  .el-input-group__prepend {
        background-color: #fff;
    }
    .member-info /deep/ .el-form-item{
        margin-bottom:0;
    }

    .member-info-item{
        border-bottom:1px #eee dashed;
        padding-bottom: 20px;
        position: relative;

        &:first-child{
            .delete-user{
                display: none;
            }
        }
    }

    .add-member{
        margin-top:20px;
    }

    .delete-user{
        display: block;
        background:#ddd;
        width:16px;
        height:16px;
        font-size:14px;
        text-align: center;
        line-height: 16px;
        color:#fff;
        cursor: pointer;
        border-radius: 50px;
        position:absolute;
        right:-30px;
        top:50%;
    }

    .insurance{
        > div{
            margin-top:10px;
        }
    }

    .insurance-item{
        margin-bottom: 20px;
    }

    .contact{
        /deep/ .el-input{
            width:50%;
        }
    }

    .submit{
        margin: 50px auto;
        display: block;
        width:250px;
        height:50px;
    }
</style>